<template>
    <el-container class="mev-div-border">
        <el-header>
            <div style="width: 100%;height: 100%;">
                <div style="color: white;width: 100%;height: 50%">图层管理</div>

                <div style="color: white;width: 100%;height: 50%">
                    <div style="width: 25%;height: 100%;float: left">
                        <span class="el-dropdown-link" style="width: 25%;height: 100%;float: left">
                            <i class="el-icon-document el-icon--right" @click="openContainsFile()"></i>
                        </span>
                        <!--
                        <el-dropdown trigger="click">
                             <span class="el-dropdown-link" style="width: 25%;height: 100%;float: left">
                                <i class="el-icon-document el-icon--right" @click="openContainsFile()"></i>
                        </span>
                            <el-dropdown-menu></el-dropdown-menu>
                              <el-dropdown-menu slot="dropdown">
                                                                <el-dropdown-item @click.native="openNewFileDilog()">新建</el-dropdown-item>
                                                                <el-dropdown-item @click.native="openContainsFile()">打开</el-dropdown-item>
                                                                <el-dropdown-item @click.native="updateFile()">保存</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        -->
                    </div>
                    <!--  <div style="width: 25%;height: 100%;float: left">
                        <i @click="routeToComponent('ToolbarAddDataComponent')" size="medium" class="el-icon-plus" style="color: white"></i>
                    </div>
                    <div style="width: 25%;height: 100%;float: left">
                        <i @click="routeToComponent('ToolbarRemoveDataComponent')" size="medium" class="el-icon-minus" style="color: white"></i>
                    </div>-->
                    <div style="width: 25%;height: 100%;float: right">
                        <i @click="close" size="medium" class="el-icon-close" style="color: white"></i>
                    </div>
                </div>
            </div>
        </el-header>
        <el-scrollbar wrap-class="list" wrap-style="color: red; height:45vh;" view-class="view-box"
            view-style="font-weight: bold;height:100%;" :native="false">
            <el-tree ref="tree" :data="LayerTreeData" :props="defaultProps" default-expand-all show-checkbox
                :default-checked-keys="defaultKey" node-key="id" @check-change="nodeChecked" @node-click="nodeClick"
                style="margin-bottom: 20px">
            </el-tree>
        </el-scrollbar>

        <!--以下为各类数据得修改属性得弹窗------------------------------------------------------------------------------------------------->
        <el-dialog width="520px" title="属性编辑(GEOJSON_POLYGON)" :visible.sync="dialogFormVisible_GEOJSON_POLYGON"
            :append-to-body="true" @closed="handleClose">
            <el-form size="mini">
                <el-form-item size="mini" label="线条颜色" :label-width="formLabelWidth">
                    <el-color-picker size="mini" v-model="dataStroke" show-alpha></el-color-picker>
                </el-form-item>
                <el-form-item size="mini" label="填充颜色" :label-width="formLabelWidth">
                    <el-color-picker size="mini" v-model="dataFill" show-alpha></el-color-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSave">修改</el-button>
            </div>
        </el-dialog>
        <el-dialog width="520px" title="属性编辑(GEOJSON_POLYLINE)" :visible.sync="dialogFormVisible_GEOJSON_POLYLINE"
            :append-to-body="true" @closed="handleClose">
            <el-form size="mini">
                <el-form-item size="mini" label="线条颜色" :label-width="formLabelWidth">
                    <el-color-picker size="mini" v-model="dataStroke" show-alpha></el-color-picker>
                </el-form-item>
                <el-form-item size="mini" label="线条宽度" :label-width="formLabelWidth">
                    <el-slider size="mini" v-model="form.strokeWidth" :show-tooltip="false" show-input></el-slider>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSave">修改</el-button>
            </div>
        </el-dialog>
        <el-dialog width="520px" title="属性编辑(GEOJSON_POINT)" :visible.sync="dialogFormVisible_GEOJSON_POINT"
            :append-to-body="true" @closed="handleClose">
            <el-form size="mini">
                <el-form-item size="mini" label="填充颜色" :label-width="formLabelWidth">
                    <el-color-picker size="mini" v-model="dataStroke" show-alpha></el-color-picker>
                </el-form-item>
                <el-form-item size="mini" label="像素大小" :label-width="formLabelWidth">
                    <el-slider size="mini" v-model="form.pixelSize" :show-tooltip="false" show-input></el-slider>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSave">修改</el-button>
            </div>
        </el-dialog>
        <el-dialog width="520px" title="属性编辑(KML)" :visible.sync="dialogFormVisible_KML" :append-to-body="true"
            @closed="handleClose"></el-dialog>
        <el-dialog width="520px" title="属性编辑(GLTF)" :visible.sync="dialogFormVisible_GLTF" :append-to-body="true"
            @closed="handleClose">
            <el-form size="mini">
                <el-form-item size="mini" label="经度" :label-width="formLabelWidth">
                    <el-input size="mini" placeholder="请输入经度" v-model="form.lon" @input="refreshInput($event)"
                        oninput="value=value.replace(/[^0-9.]/g,'')" clearable></el-input>
                </el-form-item>
                <el-form-item size="mini" label="纬度" :label-width="formLabelWidth">
                    <el-input size="mini" placeholder="请输入纬度" v-model="form.lat" @input="refreshInput($event)"
                        oninput="value=value.replace(/[^0-9.]/g,'')" clearable></el-input>
                </el-form-item>
                <el-form-item size="mini" label="离地高度" :label-width="formLabelWidth">
                    <el-input size="mini" placeholder="请输入离地高度" v-model="form.height" @input="refreshInput($event)"
                        oninput="value=value.replace(/[^0-9.]/g,'')" clearable></el-input>
                </el-form-item>
                <el-form-item size="mini" label="缩放倍数" :label-width="formLabelWidth">
                    <el-input size="mini" placeholder="请输入最大缩放比例" v-model="form.scale" @input="refreshInput($event)"
                        oninput="value=value.replace(/[^0-9.]/g,'')" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSave">修改</el-button>
            </div>
        </el-dialog>
        <el-dialog width="520px" title="属性编辑(B3DM)" :visible.sync="dialogFormVisible_B3DM" :append-to-body="true"
            @closed="handleClose">
            <el-form size="mini">
                <el-form-item size="mini" label="经度" :label-width="formLabelWidth">
                    <el-input size="mini" placeholder="请输入经度" v-model="form.lon" @input="refreshInput($event)"
                        oninput="value=value.replace(/[^0-9.]/g,'')" clearable></el-input>
                </el-form-item>
                <el-form-item size="mini" label="纬度" :label-width="formLabelWidth">
                    <el-input size="mini" placeholder="请输入纬度" v-model="form.lat" @input="refreshInput($event)"
                        oninput="value=value.replace(/[^0-9.]/g,'')" clearable></el-input>
                </el-form-item>
                <el-form-item size="mini" label="离地高度" :label-width="formLabelWidth">
                    <el-input size="mini" placeholder="请输入离地高度" v-model="form.height" @input="refreshInput($event)"
                        oninput="value=value.replace(/[^0-9.]/g,'')" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSave">修改</el-button>
            </div>
        </el-dialog>
        <el-dialog width="520px" title="新建图层" :visible.sync="dialogFormVisible_newFile" :append-to-body="true"
            @closed="handleClose">
            <el-form size="mini">
                <el-form-item size="mini" label="文件名称" :label-width="formLabelWidth">
                    <el-input size="mini" style="width: 210px" placeholder="文件名称" v-model="newFileName"
                        @input="refreshInput($event)" clearable></el-input>
                </el-form-item>
                <el-form-item size="mini" label="存放位置" :label-width="formLabelWidth">
                    <el-input size="mini" v-model="newFilePath" autocomplete="off" style="width: 150px" readonly="true">
                    </el-input>
                    <el-button size="mini" type="primary" @click="importHandler_newFile">导入</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSave_newFile">确定</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>

<script>
import LayerManager from "../../../plugins/mev/layer/LayerManager";

export default {
    name: "LayerComponent",
    data: function() {
        return {
            LayerTreeData: [],
            defaultProps: {
                children: "children",
                label: "name"
            },
            defaultKey: [],
            dialogFormVisible_GEOJSON_POLYGON: false,
            dialogFormVisible_GEOJSON_POLYLINE: false,
            dialogFormVisible_GEOJSON_POINT: false,
            dialogFormVisible_KML: false,
            dialogFormVisible_GLTF: false,
            dialogFormVisible_B3DM: false,
            dialogFormVisible_newFile: false,
            selectedItem: null,
            formLabelWidth: "80px",
            form: {},
            newFileName: null,
            newFilePath: null,
            dataStroke: "",
            dataFill: ""
            /* OpenFilePath: null*/
        };
    },
    beforeDestroy() {
    },
    mounted() {
        this.LayerTreeData = LayerManager.getInstance().getLayerData();
        this.setCheck();

        //alert("monut");


        this.onloaddefaultfile();
    },
    methods: {
        refreshInput: function() {
            this.$forceUpdate();
        },
        //新建图层文件
        openNewFileDilog: function() {
            //打开新建文件弹窗
            let that = this;
            that.newFileName = null;
            that.dialogFormVisible_newFile = true;
        },


        onloaddefaultfile:function(){

               
                if(window.defaultlayerloaded && window.defaultlayerloaded)
                return;


                 window.defaultlayerloaded = true;

               ///storage/emulated/0/mev

               let that = this;

        //var path = 'storage/emulated/0/mev/' + '便携式系统.json';

        var path = 'storage/6565-3531/SdData/' + '便携式系统.json';
        

        JsContext.onMarkGeoJsonImport = function(path) {
                LayerManager.getInstance().closeLoadData();
                /* that.OpenFilePath = path;*/
                LayerManager.getInstance().setPathObject(path);

               // alert(path);
                const str = path.split("/");
                const sdcard = str[2];
                let flag = that.initLayerData(path, sdcard);

                //alert(flag)
                if (flag) {
                    that.getLayerData();
                    that.$message({
                        showClose: true,
                        message: "打开文件" + path,
                        type: "warning"
                    });
                    that.setCheck();
                    that.loadData();
                    if (this.$route.name !== "EmptyComponent") {
                        this.$router.push({ name: "EmptyComponent" });
                    }
                }
            };

            JsContext.onMarkGeoJsonImport(path);

        },

        //打开已存在得图层文件
        openContainsFile: function() {
            let that = this;

            JavaContext.loadFileBrowser(true, LayerManager.RootPath, true, "JsContext.onMarkGeoJsonImport");

            JsContext.onMarkGeoJsonImport = function(path) {
                path = "http://mev.com" + path;
                //  let path = "./mev/sample.map";
                LayerManager.getInstance().closeLoadData();
                /* that.OpenFilePath = path;*/
                LayerManager.getInstance().setPathObject(path);
                const str = path.split("/");
                const sdcard = str[2];

                LayerManager.getInstance().init(path, sdcard, function(layerData) {
                    that.LayerTreeData = layerData;

                    that.$message({
                        showClose: true,
                        message: "打开文件" + path,
                        type: "warning"
                    });
                    that.setCheck();
                    LayerManager.getInstance().loadData();
                });

            };
        },
        saveNewFile: function() {
            //根据选择的路径生成自定义名称的图层文件内容为一个空[];
            LayerManager.getInstance().saveNewFile();
        },

        //将每条数据.visible为true的全部勾选上
        setCheck: function() {
            this.defaultKey = [];
            let that = this;
            let layerData = this.LayerTreeData;
            layerData.forEach(function(parentItem) {
                parentItem.children.forEach(function(item) {
                    if (item.visible === true) {
                        that.defaultKey.push(item.id);
                    }
                });
            });
        },
        //勾选事件
        nodeChecked: function(item, checked) {
            LayerManager.getInstance().setVisible(item, checked);
        },
        //选中数据事件
        nodeClick: function(data) {
           /* if(data.cesiumTreeData._centerxy != null)
            {
               // alert('飞坐标');
               // window.cesiuv
               window.cesiumViewer.camera.flyTo({
            destination : Cesium.Cartesian3.fromDegrees(data.cesiumTreeData._centerxy[0], data.cesiumTreeData._centerxy[1],15000),
            orientation : {
                heading : Cesium.Math.toRadians(0.0),
                pitch : Cesium.Math.toRadians(-90.0),
                roll : 0.0
            }
        });

               return;
            }*/

            data.cesiumTreeData.flyTo(data.cesiumTreeData._dataObject);
        },
        //点击修改按钮触发
        nodeEdit: function(data) {
            let that = this;
            if (!data.cesiumTreeData._DataObject) {
                that.$message({
                    showClose: true,
                    message: "请先勾选数据再进行编辑",
                    type: "warning"
                });
                return;
            }
            this.openEditPropDilog(data);
        },
        //弹出修改弹窗
        openEditPropDilog: function(data) {
            let that = this;
            that.selectedItem = data;

            switch (data.datatype) {
                case LayerManager.IMGPAK:
                    //打开修改影像属性弹窗
                    break;
                case LayerManager.GEOJSON:
                    Cesium.Resource.fetchJson(data.path).then(jsonData => {
                        let type = jsonData.features[0].geometry.type;
                        switch (type) {
                            case LayerManager.GEOJSON_POLYGON:
                                that.dataStroke = data.cesiumTreeData.properties.stroke;
                                that.dataFill = data.cesiumTreeData.properties.fill;
                                //打开修改geojson_面属性弹窗
                                that.dialogFormVisible_GEOJSON_POLYGON = true;
                                break;
                            case LayerManager.GEOJSON_POLYLINE:
                                that.dataStroke = data.cesiumTreeData.properties.stroke;
                                that.form.strokeWidth = data.cesiumTreeData.properties.strokeWidth;
                                //打开修改geojson_面属性弹窗
                                that.dialogFormVisible_GEOJSON_POLYLINE = true;
                                break;
                            case LayerManager.GEOJSON_POINT:
                                that.form.pixelSize = data.cesiumTreeData.properties.pixelSize;
                                /*    that.form.pixelSize = 10*/
                                that.dataStroke = data.cesiumTreeData.properties.stroke;
                                //打开修改geojson_点属性弹窗
                                that.dialogFormVisible_GEOJSON_POINT = true;
                                break;
                        }
                    });
                    break;
                case LayerManager.B3DM:
                    that.form.lon = data.cesiumTreeData.properties.lon;
                    that.form.lat = data.cesiumTreeData.properties.lat;
                    that.form.height = data.cesiumTreeData.properties.height;
                    //打开修改b3dm属性弹窗
                    that.dialogFormVisible_B3DM = true;
                    break;

                case LayerManager.GLTF:
                    that.form.lon = data.cesiumTreeData.properties.lon;
                    that.form.lat = data.cesiumTreeData.properties.lat;
                    that.form.height = data.cesiumTreeData.properties.height;
                    that.form.scale = data.cesiumTreeData.properties.scale;
                    //打开修改gltf属性弹窗
                    that.dialogFormVisible_GLTF = true;
                    break;
                case LayerManager.KML:
                    //打开修改kml属性弹窗
                    that.dialogFormVisible_KML = true;
                    break;
            }
        },
        //修改完成后保存按钮触发
        handleSave: function() {
            let that = this;
            that.form.stroke = that.dataStroke;
            that.form.fill = that.dataFill;
            LayerManager.getInstance().setProperties(that.selectedItem, that.form);
            that.handleClose();
        },

        //保存图层
        updateFile: function() {
            let that = this;
            LayerManager.getInstance().saveFile(that, that.LayerTreeData);
        },

        close: function() {
            if (this.$route.name !== "EmptyComponent") {
                this.$router.push({ name: "EmptyComponent" });
            }
        },
        //关闭所有编辑弹窗
        handleClose: function() {
            let that = this;
            that.dialogFormVisible_GEOJSON_POLYGON = false;
            that.dialogFormVisible_GEOJSON_POLYLINE = false;
            that.dialogFormVisible_GEOJSON_POINT = false;
            that.dialogFormVisible_B3DM = false;
            that.dialogFormVisible_KML = false;
            that.dialogFormVisible_GLTF = false;
            that.dialogFormVisible_newFile = false;
        },
        routeToComponent: function(componentName) {
            if (LayerManager.getInstance().getPathObject() === null) {
                this.$message({
                    showClose: true,
                    message: "请先加载图层文件",
                    type: "warning"
                });
                return;
            }
            if (this.$route.name !== componentName) {
                this.$router.push({ name: componentName });
            }
        },
        importHandler_newFile: function() {
            let that = this;
            JavaContext.loadFileBrowser(false, LayerManager.RootPath, true, "JsContext.onMarkGeoJsonImport");
            JsContext.onMarkGeoJsonImport = function(path) {
                that.newFilePath = path;
                that.$message({
                    showClose: true,
                    message: "目标路径" + path,
                    type: "warning"
                });
            };
        },
        handleSave_newFile: function() {
            let that = this;
            if (that.newFilePath === null || that.newFileName === null) {
                that.$message({
                    showClose: true,
                    message: "文件名称和存放位置不能为空",
                    type: "warning"
                });
            }
            let finalPath = that.newFilePath + "/" + that.newFileName + ".map";
            let arr = LayerManager.LayerTemplate;
            JavaContext.saveFile(finalPath, JSON.stringify(arr));
            that.$message({
                showClose: true,
                message: "添加文件成功",
                type: "warning"
            });
            that.handleClose();

            /*----------------*/
            LayerManager.getInstance().closeLoadData();
            /* that.OpenFilePath = path;*/
            LayerManager.getInstance().setPathObject(finalPath);

            LayerManager.getInstance().init(finalPath, sdcard, function(layerData) {
                that.LayerTreeData = layerData;
                that.setCheck();
                LayerManager.getInstance().loadData();
            });
        },
    }
};
</script>

<style scoped>

</style>
